<template>
  <div class="login">
    <h1>账号登录</h1>
    <div class="conter">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="请填写手机号或邮箱"
          :rules="[{ required: true, message: '请填写手机号或邮箱' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="请填写密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="primary"
            size="large"
            class="primary"
            native-type="submit"
          >提交</van-button>
        </div>
      </van-form>
      <a>忘记密码</a>
    </div>
    <div class="login_links" @click="toRegister">注册账号</div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: 'admin',
      password: 'test',
    }
  },
  methods: {
    toRegister() {
      this.$router.push('/register')
    },
    onSubmit(values) {
      const promise = this.$store.dispatch('loginAsync', values)
      promise.then(() => {
        // this.$router.push('/mine')
      })
    },
  },
}
</script>

<style lang="less" scoped>
.login {
  padding: 0.55556rem 0.66667rem 0.66667rem;

  h1 {
    text-align: center;
  }

  .conter {
    margin-top: 100px;
    min-height: 150px;

    .van-field {
      background: #ccc;
      border-radius: 0.19444rem;
      height: 1.22222rem;
      padding: 0.27778rem 0.41667rem;
      font-size: 0.38889rem;
      line-height: 0.66667rem;
      margin-bottom: 20px;
    }
  }

  .primary {
    margin-top: 20px;
    border-radius: 0.19444rem;
  }

  .login_links {
    text-align: center;
    margin-top: 20px;
    color: rgb(0, 255, 55);
  }
}
</style>
